@use '../node_modules/@angular/material' as mat;

@import '../node_modules/angular-gridster/dist/angular-gridster.css';
@import '../node_modules/angular-loading-bar/build/loading-bar.css';
@import '../node_modules/angular-material/modules/scss/angular-material';
@import '../node_modules/angular-material-data-table/dist/md-data-table.css';
@import '../node_modules/angular-moment-picker/dist/angular-moment-picker.css';
@import '../node_modules/angular-timeline/dist/angular-timeline.css';
@import './scss/bootstrap';
@import '../node_modules/codemirror/addon/dialog/dialog.css';
@import '../node_modules/codemirror/addon/lint/lint.css';
@import '../node_modules/codemirror/lib/codemirror.css';
@import '../node_modules/dragular/dist/dragular.css';
@import '../node_modules/highlight.js/styles/a11y-light.css';
@import '../node_modules/md-color-picker/dist/mdColorPicker.css';
@import '../node_modules/md-steppers/dist/md-steppers.min.css';
@import '../node_modules/@toast-ui/editor/dist/toastui-editor.css';
@import '../node_modules/@toast-ui/editor/dist/toastui-editor-viewer.css';
@import '../node_modules/@gravitee/ui-components/assets/css/gravitee-console-theme.css';

@import '../node_modules/v-accordion/dist/v-accordion.css';

@import 'constants';

@import 'components/circularPercentage/circularPercentage';
@import 'components/contextual/contextual-doc.component';
@import 'components/dashboard/dashboard';
@import 'components/documentation/page/page';
@import 'components/identityPicture/identityPicture';
@import 'components/image/image';
@import 'components/error/error';
@import 'components/import/import-api';
@import 'components/navbar/navbar';
@import 'components/newsletter-subcription/newsletter-reminder';
@import 'components/notifications/notifications';
@import 'components/quick-time-range/quick-time-range';
@import 'components/sidenav/sidenav';
@import 'components/user-autocomplete/user-autocomplete';
@import 'components/widget/widget';
@import 'components/alerts/dashboard/alerts-dashboard';
@import 'components/alerts/alert/alert';
@import 'components/policy-studio-wrapper/policy-studio-wrapper';

@import 'management/analytics';
@import 'management/api/api';
@import 'management/api/creation/newApi';
@import 'management/application/applications';
@import 'management/configuration/theme/theme';
@import 'management/configuration/portal/portal';
@import 'management/configuration/groups/group/group';
@import 'management/configuration/categories/category/category';
@import 'management/datatable';
@import 'management/forms';
@import 'management/instances/instances';
@import 'management/portalnotifications/portalnotifications';
@import 'management/stepper';
@import 'management/submenu';
@import 'management/tasks/tasks';
@import 'management/dashboard/analytics-dashboard/analytics-dashboard';
@import 'management/dashboard/apis-status-dashboard/apis-status-dashboard';
@import 'management/dashboard/home-dashboard/home-dashboard';

@import 'organization/organization';

@import 'user/user';
@import 'user/newsletter/newsletter-subscription';
@import 'user/login/login';

@import '../node_modules/@fontsource/libre-franklin/scss/mixins';

// Angular Material
@import 'scss/gio-material-theme';

@each $weight in (400, 500) {
  $fontId: 'libre-franklin';
  $unicodeMap: (
    latin-ext: (
      U+0100-024F,
      U+0259,
      U+1E00-1EFF,
      U+2020,
      U+20A0-20AB,
      U+20AD-20CF,
      U+2113,
      U+2C60-2C7F,
      U+A720-A7FF,
    ),
    latin: (
      U+0000-00FF,
      U+0131,
      U+0152-0153,
      U+02BB-02BC,
      U+02C6,
      U+02DA,
      U+02DC,
      U+2000-206F,
      U+2074,
      U+20AC,
      U+2122,
      U+2191,
      U+2193,
      U+2212,
      U+2215,
      U+FEFF,
      U+FFFD,
    ),
  );

  @include fontFace(
    $fontName: 'Libre Franklin',
    $fontId: $fontId,
    $style: normal,
    $display: swap,
    $weight: $weight,
    $fontDir: '~@fontsource/#{$fontId}/files',
    $unicodeMap: $unicodeMap
  );
}

body {
  font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  top: 0px !important;
  background-color: lightgrey;
  position: inherit !important;
}

// Wrap mat with `.mat` class without increasing the css specificity
// Allows you to disable it on some routes
:where(.mat) {
  @include mat.core($gio-typography);
  @include mat.all-component-themes($gio-theme);

  @include material-layout-compatibility();
  @import './scss/gio-global-style';
}

:where(.bootstrap) {
  [layout='row'] {
    flex-direction: row;
  }

  .browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
  }

  .thumbnail {
    height: 200px;

    img.pull-right {
      width: 50px;
    }
  }

  .user-avatar {
    border-radius: 99%;
  }

  .md-toolbar-tools-bottom {
    font-size: small;
  }

  .gravitee-table {
    width: 100%;

    th {
      text-align: center;
    }
  }

  .gravitee-logo {
    height: 200px;
    padding-right: 10px;
    vertical-align: middle;
  }

  .gravitee-navbar-logo {
    height: 50px;
    padding-right: 10px;
    vertical-align: middle;
  }

  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
  }

  .icon-users {
    width: 1.125em;
  }

  .flex {
    flex: 1;
  }

  .face {
    margin: 0px 16px;
  }

  md-toolbar {
    font-size: 18px;
    min-height: 49px;

    .md-tall {
      min-height: 100px;
    }

    z-index: 10;
  }

  a,
  [ui-sref] {
    cursor: pointer;
  }

  .gravitee-no-link {
    cursor: inherit !important;
  }

  md-switch {
    display: inline-flex;
  }

  .color3 {
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
  }

  md-toolbar:not(.md-hue-1),
  .md-fab {
    fill: #fff;
  }

  ng-md-icon {
    position: relative;
    top: 7px;

    &[icon='delete'] {
      svg {
        width: 100%;
      }
    }
  }

  table {
    ng-md-icon {
      position: relative;
      top: 0;
    }

    code {
      position: relative;
      top: -6px;
    }
  }

  .btn-group ng-md-icon {
    position: relative;
    top: 3px;
  }

  md-radio-button ng-md-icon {
    position: relative;
    top: 2px;
  }

  .gravitee-card:hover {
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.37);
  }

  header {
    display: flex;
  }

  body {
    background: #fff;
  }

  table[md-data-table] {
    background-color: $backgroundColor;
  }

  table {
    background: #fff;
    border: solid 1px #ddd;
    margin-bottom: 1.25rem;
    table-layout: auto;
  }

  table thead {
    background: #f5f5f5;
  }

  table thead tr th,
  table tfoot tr th,
  table tfoot tr td,
  table tbody tr th,
  table tbody tr td,
  table tr td {
    display: table-cell;
    line-height: 1.125rem;
  }

  table thead tr th,
  table thead tr td {
    color: #222;
    font-weight: bold;
    padding: 0.5rem 0.625rem 0.625rem;
  }

  table tr th,
  table tr td {
    color: #222;
    padding: 0.5625rem 0.625rem;
    text-align: left;
  }

  table tr.even,
  table tr.alt,
  table tr:nth-of-type(even) {
    background: #f9f9f9;
  }

  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }

  md-toast {
    position: fixed;

    &.md-toast-success-theme .md-toast-content {
      background-color: #4ea44d;
    }

    &.md-toast-error-theme .md-toast-content {
      background-color: #bd362f;
    }
  }

  gravitee-sidenav {
    z-index: 20;
  }

  .gravitee-pie-chart-container {
    height: 150px;
    margin: 0 auto;
    text-align: center;
    width: 150px;
  }

  .form-control {
    padding-right: 30px;
  }

  .form-control-feedback,
  .has-feedback label ~ .form-control-feedback {
    position: relative;
    float: right;
    top: -35px;
  }

  .gravitee-placeholder {
    opacity: 0.4;
  }

  .md-container {
    display: inline-block;
  }

  .gravitee-no-sidenav-container {
    background: $backgroundColor;
    height: 100%;
  }

  .gravitee-no-sidenav-content {
    background-color: #fafafa;
    border-radius: 7px;
    width: 400px;
    margin: 40px auto 10px;
    overflow: hidden;
    padding: 10px 30px 30px;
    position: relative;

    & md-input-container {
      margin-top: 0px;
    }
  }

  .gravitee-no-sidenav-header {
    background-image: url('assets/gravitee-logo-dark-blue.png');
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: center top;
    margin-bottom: 40px;
    padding-top: 100px;

    & a {
      margin: 10px auto;

      & img {
        height: 100px;
      }
    }

    & label {
      font-size: 28px;
      font-weight: 400;
      margin: 0px;
    }

    & label.subtitle {
      font-size: 14px;
      font-weight: 200;
    }
  }

  md-sidenav,
  md-backdrop {
    position: fixed;
  }

  md-list-item::before {
    min-height: 40px;
  }

  .md-whiteframe-1dp,
  .md-whiteframe-z1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  }

  .md-whiteframe-z2 {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .landing-header {
    padding: 0px 16px 0px 16px;

    h3 {
      color: #006cab;
      font-size: 32px;

      small {
        font-size: 40%;
      }
    }

    p {
      color: #707070;
      font-size: 16px;
      margin: 0 0 20px;
    }
  }

  .api-box-icon {
    height: 50px;

    &.api-box-icon-figure {
      width: 150px;
    }

    img {
      display: block;
      max-width: 150px;
      max-height: 80px;
      width: auto;
      height: auto;
    }

    &.default {
      background-size: auto 100%;
    }
  }

  .api-box {
    width: 98%;
    min-width: 320px;
    max-width: 480px;
    margin: 14px;
    outline: none;
  }

  .apis-box {
    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
      text-decoration: none;
      color: black;
    }

    .api-box {
      md-card-header {
        padding: 0px 0px 20px 0px;
      }

      md-card-avatar {
        width: 35px;
        height: 20px;
      }

      md-card-content {
        padding: 0px;
      }

      md-card-footer {
        padding: 0px 5px 5px 5px;
      }

      .api-box-description {
        text-align: center;
      }

      .api-box-name-version {
        font-size: 14px;
        font-weight: 700;
        color: grey;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        small {
          padding: 0px;
        }
      }

      .api-box-state {
        font-size: 12px;
      }

      .api-box-footer {
        color: #cdcdcd;
      }
    }
  }

  .icon-circle {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 2px solid #45aed6;
    border-radius: 100px;
    position: relative;
  }

  [ng\:cloak],
  [ng-cloak],
  [data-ng-cloak],
  [x-ng-cloak],
  .ng-cloak,
  .x-ng-cloak {
    display: none !important;
  }

  md-content,
  .main-content {
    background: #fff;
    color: #333;
    font-size: 12px;
  }

  table[md-data-table] > thead:not([md-table-progress]) > tr > th > div {
    height: 30px;
  }

  table.md-table {
    overflow: auto;
  }

  v-pane-header {
    legend {
      border-bottom: none;
      margin-bottom: 0;
    }

    ng-md-icon {
      top: 4px;
    }
  }

  md-card.no-box-shadow {
    box-shadow: none;
  }

  .gravitee-detail-header {
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    height: $graviteeHeader;
  }

  .md-content {
    padding-top: $navbarHeaderHeight;
  }

  .gv-main-container {
    height: calc(100vh - #{$navbarHeaderHeight});
    background-color: var(--gv-theme-neutral-color-lighter);
  }

  .gv-button-toggled {
    background-color: rgba(158, 158, 158, 0.2);
  }

  .md-select-menu-container {
    z-index: 99999 !important;
  }

  .disabled {
    pointer-events: none;
    opacity: 0.7;
  }

  [role='button'] {
    cursor: pointer;
  }

  .readonly > [role='button'] {
    cursor: inherit;
  }

  .md-dialog-container {
    height: 100vh !important;
    top: 0 !important;
    position: fixed !important;
  }

  *:focus {
    outline: none;
  }

  table {
    code {
      top: inherit;
    }
  }

  .gv-search-button {
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    fill: rgba(0, 0, 0, 0.54);
  }

  // Hack to make the checkbox lighter when disabled and so improve difference with the "default/activated" state
  md-checkbox[disabled]:not(.md-checked) .md-icon {
    border-color: rgba(0, 0, 0, 0.1);
  }

  .ipsum {
    font-size: 11px;
    line-height: 14px;
    color: grey;
  }

  .md-fab-scrollable {
    position: fixed !important;
    transition: right 0.4s !important;
    -moz-transition: right 0.4s !important;
    -webkit-transition: right 0.4s !important;
    -o-transition: right 0.4s !important;

    &.gv-help-displayed {
      right: 320px !important;
    }
  }
  .gv-info {
    fill: #45aed6;
  }

  .gv-warning {
    fill: #ce4844;
  }

  .gv-input-number {
    width: fit-content;
    min-width: 300px;
  }

  .gv-tooltip {
    display: grid;
  }

  .gv-tooltip-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .gv-tooltip-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .gv-tooltip-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .gv-tooltip-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .gv-diff-added {
    background-color: #e6ffed;
  }

  .gv-diff-added:before {
    content: ' + ';
    position: absolute;
    left: -8px;
    background-color: #e6ffed;
  }

  .gv-diff-removed {
    background-color: #ffeef0;
  }

  .gv-diff-removed:before {
    content: ' - ';
    position: absolute;
    left: -8px;
    background-color: #ffeef0;
  }

  .gv-diff-no-changes {
    color: grey;
  }

  .button,
  select,
  html,
  textarea,
  input {
    font-family: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
}
